<template>
  <div class="cart">
    <!-- 购物车顶部 -->
    <a class="dominant">
      <span>特卖商品</span> &nbsp;
      <span class=" count-time"> </span>
    </a>
    <el-divider></el-divider>
    <!-- 配送至 -->
    <div class="tips">
      <span class="delivery"
        >配送至
        <em class="place">深圳市</em>
      </span>
      <div class="checkCommodity">
        勾选商品“
        <img
          src="//shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/multiplechoice_selected_normal-hash-e072799d.png"
        />
        ”即可锁定库存20分钟，倒计时内不用担心商品被抢走～
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="shopList">
      <div class="cart-th">
        <div class="cart-th1">商品</div>
        <div class="cart-th2">单价</div>
        <div class="cart-th3">数量</div>
        <div class="cart-th4">操作</div>
      </div>
      <div class="dominant-1" title="唯品自营">唯品自营</div>

      <ul class="shopCart">
        <li v-for="(order, index) in shopcartList" :key="index">
          <div class="shopCart-d">
            <input
              type="checkbox"
              :checked="order.isChecked"
              @click="getChange(order)"
            />
            <div>
              <img
                :src="order.imgUrl"
                alt="添加商品图片"
                style="width: 100px; height: 100px"
              />
            </div>
            <div>
              <a href="javascript:;">
                <h3>{{ order.name }}</h3></a
              >
              <p>尺码:{{ order.sizeName }}</p>
            </div>
            <div>
              <h3 style="color: #f10180">
                <span>￥:</span><strong>{{ order.priceExcludePms }}</strong>
              </h3>
            </div>
            <div>
              <el-input-number
                v-model="order.num"
                :value="order.num"
                :min="1"
                label="描述文字"
                size="mini"
              ></el-input-number>
            </div>
            <div>
              <button @click="deleteshop(order.id)">删除</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 立即结算 -->
    <div class="payAll">
      <div class="payTop">
        <form action="">
          <select name="youhuiquan" id="">
            <option value="yhq">使用优惠券</option>
          </select>
        </form>
        <div class="money-wrap">
          <div>
            <span style="margin-left: 30px"
              >共{{ chooseNum }}件商品&nbsp;&nbsp;</span
            >
            <span style="margin-right: 100px">商品总金额</span>
            <strong>￥{{ allTotal }}</strong>
          </div>
          <div>
            <!-- <span>总金额</span> -->
            <!-- <strong>￥{{ item.cartPrice * item.skuNum }}</strong> -->
          </div>
        </div>
      </div>
      <div class="payBottom">
        <div class="payleft">
          <p>请在倒计时结束前结算</p>
          <div>?</div>
        </div>

        <div class="payright">
          <a href="javascript:;">
            <span @click="$router.push('/trade')">立即结算</span>
            <span class="count-time1"
              >
              <!-- <span>18</span>
              &nbsp;:&nbsp;
              <span>33</span> -->
              </span
            >
          </a>
        </div>
      </div>
    </div>
    <!-- 尾部图片 -->
    <div class="bottom">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { reqDelShopcart } from "@/api/shopcart";
import { requpdateData } from "@/api/detail";
export default {
  name: "ShopCart",
  data() {
    return {
      shopData: [],
      num: 1,
    };
  },
  methods: {
    getShopcartList() {
      this.$store.dispatch("getShopcartList");
    },
    
    // 删除单个商品
    async deleteshop(id) {
      await reqDelShopcart(id);
      this.getShopcartList();
    },
    // 修改某个商品的状态
    async getChange(order) {
      const obj = {
        isChecked: order.isChecked ? false : true,
      };
      await requpdateData(order.id, obj);
      this.getShopcartList();
    },
  },
  mounted() {
    this.getShopcartList();
    let maxTime = 20 * 60;
    this.timer = setInterval(() => {
      if (maxTime >= 0) {
        let minutes = Math.floor(maxTime / 60);
        let seconds = Math.floor(maxTime % 60);
        let msg = minutes + "分" + seconds + "秒";
        document.querySelector(".count-time").innerText = msg;
        document.querySelector(".count-time1").innerText = msg;
        if (maxTime == 5 * 60) alert("距离结束仅剩5分钟");
        --maxTime;
      } else {
        let msg = "超时";
        document.querySelector(".count-time").innerText = msg;
      }
    }, 1000);
  },
  computed: {
    ...mapState({
      shopcartList: (state) => state.shopcart.shopcartList || [],
    }),
    // 已选择商品数量
    chooseNum() {
      let sum = 0;
      this.shopcartList.forEach((item) => {
        if (item.isChecked) {
          sum += item.num;
        }
      });
      return sum;
    },
    allTotal() {
      return this.shopcartList.reduce((prev, item) => {
        if (item.isChecked) {
          prev += item.num * item.priceExcludePms;
        }
        return prev;
      }, 0);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.cart {
  width: 1200px;
  margin: 0 auto;
  h4 {
    margin: 9px 0;
    font-size: 14px;
    line-height: 21px;
  }
  .shopList {
    .cart-th {
      background: #f5f5f5;
      border: 1px solid #ddd;
      padding: 15px 0px;
      overflow: hidden;
      & > div {
        float: left;
      }
      .cart-th1 {
        margin-left: 20%;
      }
      .cart-th2 {
        margin-left: 25%;
      }
      .cart-th3 {
        margin-left: 20%;
      }
      .cart-th4 {
        margin-left: 15%;
      }
    }
  }
}
.dominant {
  color: #f10180;
  border-bottom: 5px solid #f10180;
  padding: 20px 10px;
  font-size: 18px;
  font-weight: 1000;
}
.dominant-1 {
  color: #f10180;
  font-size: 18px;
  margin: 20px;
}
.delivery {
  font-size: 18px;
}
.place {
  font-weight: 700;
  margin-left: 5px;
  padding-right: 15px;
  border-right: 2px solid #c4c4c4;
}
.checkCommodity {
  display: inline-block;
  margin-right: 12px;
  color: #666;
  font: 14px/20px "Microsoft Yahei";
  padding-left: 15px;
}
.tips {
  margin-bottom: 30px;
}
.shopCart {
  border: 1px solid #d0d0d0;
  overflow: hidden;
  position: relative;
  li {
    overflow: hidden;
    margin: 20px 0px;
  }
  input {
    position: absolute;
    margin-left: 10px;
    margin-top: 50px;
  }
  .shopCart-d div {
    float: left;
    overflow: hidden;
    img {
      margin-left: 50px;
    }
    a > h3 {
      margin-top: 20px;
      margin-left: 20px;
      width: 250px;
    }
    p {
      margin-top: 15px;
      margin-left: 20px;
    }
    h3 {
      margin-top: 40px;
      margin-left: 130px;
      width: 100px;
    }
    :deep(.el-input-number--mini) {
      width: 95px;
      line-height: 26px;
      margin-top: 30px;
      margin-left: 148px;
    }
    button {
      margin-top: 35px;
      margin-left: 137px;
      border: none;
    }
  }
}
.payAll {
  width: 100%;
  margin-top: 35px;
  border: 1px solid #ecebeb;
  .payTop {
    width: 100%;
    overflow: hidden;
    form {
      float: left;
      select {
        margin: 15px 0px 0px 15px;
        font-size: 14px;
        color: #f10180;
        padding: 5px;
        border: 1px solid #f10180;
        border-radius: 3px;
        outline: none;
      }
    }
    .money-wrap {
      float: left;
      height: 100px;
      width: 940px;
      text-align: right;
      div:nth-child(1) {
        height: 20px;
        margin-top: 20px;
        strong {
          font-size: 14px;
          font-weight: bold;
        }
      }
      div:nth-child(2) {
        height: 20px;
        margin-top: 10px;
        span {
          margin-right: 148px;
          margin-left: 50px;
        }
        strong {
          font-size: 14px;
          font-weight: bold;
          color: #f04287;
        }
      }
    }
  }
  .payBottom {
    height: 60px;
    width: 100%;
    .payleft {
      float: left;
      width: 80%;
      height: 60px;
      background-color: #f3f3f3;
      text-align: right;
      p {
        float: left;
        margin-left: 780px;
        line-height: 60px;
        font-size: 14px;
        color: #666;
      }
      div {
        margin-top: 22px;
        margin-right: 15px;
        float: right;
        width: 12px;
        height: 12px;
        font-weight: bold;
        text-align: center;
        line-height: 12px;
        border: 2px solid #2689f8;
        color: #2689f8;
        border-radius: 50%;
        cursor: pointer;
      }
    }
    .payright {
      float: right;
      width: 20%;
      height: 60px;
      text-align: center;
      line-height: 60px;
      background-color: #f10180;
      a {
        text-decoration: none;
        span {
          color: #fff;
          font-size: 18px;
        }
        .time-bottom {
          margin-left: 5px;
          font-size: 14px;
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 100px 0px;
  height: 150px;
  width: 100%;
  div {
    width: 300px;
    height: 140px;
    border: 1px solid #e1e1e1;
    background-size: contain;
  }
  div:nth-child(1) {
    background-image: url("./images/bgc1.jpg");
  }
  div:nth-child(2) {
    background-image: url("./images/bgc2.jpg");
  }
  div:nth-child(3) {
    background-image: url("./images/bgc3.jpg");
  }
}
</style>
